<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 15:58:47
 * @LastEditors: yuxi
 * @LastEditTime: 2022-10-11 22:00:21
-->
<template>
  <div class="layer-control">
    <div class="layers">
      <div v-for="(layer, li) in layers" :key="layer.ol_uid">
        <slot name="layer"
          :layer="layer"
          :layer_index="li"          
          :ol_uid="layer.ol_uid" 
          :layerName="layer.get('layerName')"
          :layerId="layer.get('layerId')"
          :properties="layer.get('properties')"

          :addLayerControl="layer.get('addLayerControl')"
          :maxResolution="layer.get('maxResolution')"
          :minResolution="layer.get('minResolution')"
          :visible="layer.get('visible')"
          :zIndex="layer.get('zIndex')"

        >
          <LayerControlItem 
          :layer="layer" :layer_index="li"></LayerControlItem>
        </slot>
      </div>
      
    
    </div>
    <div class="extend">
      <slot name="extend"></slot>
    </div>
  </div>
</template>
<script>
import commonMixin from '../mixins/base.js'
import LayerControlItem from './LayerControlItem'
export default {
  name: 'MiningLayerControl',
  components: {
    LayerControlItem
  },
  mixins: [commonMixin('control')],
  computed: {

  },
  data () {
    return {
      layers: []
    }
  },
  methods: {
    load () {
      const { map } = this
      // map.on('change:layerGroup', this.layerChange)
      let layers = map.getLayers()
      this.layers = []
      layers.forEach(layer => {
        console.log(layer)
        if (layer.get('addLayerControl')) {
          this.layers.push(layer)
        }
      })
    },
    layerChange () {
      console.log('layerChange')
    }
  }
}
</script>
  
<style lang="less" scoped>
.layer-control {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 200px;
  min-height: 200px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px 0px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
</style>